<template>
    <div class="page-bar">
        <ul class="pagination">
            <li class="first">
                <span>共{{dataNum}}条记录 第 {{cur}} / {{all}} 页</span>
            </li>
            <li v-if="cur>1">
                <a v-on:click="cur--,pageClick()">上一页</a>
            </li>
            <li v-if="cur==1">
                <a class="banclick"><</a>
            </li>
            <li class="li_a" v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
                <a v-on:click="btnClick(index)">{{ index }}</a>
            </li>
            <li v-if="cur!=all">
                <a v-on:click="cur++,pageClick()">下一页</a>
            </li>
            <li v-if="cur == all">
                <a class="banclick">></a>
            </li>
            <li class="last_li">
                <span>共<i>{{all}}</i>页</span>
            </li>
    </ul>
</div>
</template>

<script>
export default {
 //显示的声明组件
 name: "paging",
 //从父级组件中传值过来的，你可以自己设置名字，但是需要跟父级传入的名字一致！
 props : ["dataAll","dataCur","datanum","dataDatanum"],
  
 
 data() {
    return {
        all: this.dataAll, //总页数
        cur: this.dataCur ,//当前页码
        num: this.datanum , //一页显示的数量 奇数
        dataNum: this.dataDatanum,//数据的数量
    
  }
 
 },
 watch: {
        cur: function(oldValue, newValue) {
        //父组件通过change方法来接受当前的页码
        this.$emit('change', oldValue)
        //这里是直接点击执行函数
  }
 },
 methods: {
  btnClick: function(data) { //页码点击事件
   if(data != this.cur) {
        this.cur = data
   }
  },
  pageClick: function() {
   console.log('现在在' + this.cur + '页');
   //父组件通过change方法来接受当前的页码
    //这里是点击下一页执行函数
   this.$emit('change', this.cur)
  }
 },
 
 computed: {
  indexs: function() {
   var left = 1;
   var right = this.all;
   var ar = [];
   if(this.all >= this.num ) {
    if(this.cur > 3 && this.cur < this.all - 2) {
     left = this.cur - (this.num-1)/2
     right = this.cur + (this.num-1)/2
    } else {
     if(this.cur <= 3) {
      left = 1
      right = this.num
     } else {
      right = this.all
      left = this.all - (this.num - 1);
     }
    }
   }
   while(left <= right) {
    ar.push(left)
    left++
   }
   return ar
 
  }
 
 }
 
}

</script>

<style >
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    font-size: 12px;
    font-family: Ubuntu, simHei, sans-serif;
    font-weight: 400
}

body {
    font-size: 1rem
}

.text-center{
    text-align: center;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 21px 0;
    border-radius: 3px;
}

.pagination > li {
    display: inline;
}

.pagination > li > a {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.5;
    text-decoration: none;
    color: #009a61;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
    list-style: none;
}

.pagination > li > a:hover {
    background-color: #eee;
}

.pagination .active {
    color: rgb(240, 6, 6);
    background-color: #009a61;
    border-left: none;
    border-right: none;
}

.pagination .active:hover {
    background: #009a61;
    cursor: default;
}

.pagination > li:first-child > a .p {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.pagination > li:last-child > a {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}
</style>